"use client"

import React from 'react'
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription
} from '@/components/ui/dialog'
import { DIALOG_CONTENT } from '@/lib/constants/bottom-navigation'

interface AboutDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
}

/**
 * 关于我们弹窗组件
 */
export function AboutDialog({ open, onOpenChange }: AboutDialogProps) {
  const { content, contacts } = DIALOG_CONTENT.about
  const contentSections = content.split('\n\n')

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="text-xl font-semibold">
            {DIALOG_CONTENT.about.title}
          </DialogTitle>
          <DialogDescription className="text-sm text-muted-foreground">
            了解Hello123导航网站，联系我们的团队
          </DialogDescription>
        </DialogHeader>
        
        <div className="mt-4 space-y-4">
          {/* 网站介绍 */}
          <div className="space-y-3">
            {contentSections.map((section, index) => (
              <p key={index} className="text-sm leading-relaxed text-foreground">
                {section.trim()}
              </p>
            ))}
          </div>

          {/* 联系方式 */}
          <div className="mt-6 p-4 bg-gradient-to-r from-blue-50 to-cyan-50 dark:from-blue-950/20 dark:to-cyan-950/20 rounded-lg border border-blue-200 dark:border-blue-800">
            <h4 className="text-sm font-medium text-blue-900 dark:text-blue-100 mb-3 flex items-center gap-2">
              <span className="text-lg">📞</span>
              联系方式
            </h4>
            
            <div className="space-y-3">
              {/* QQ联系 */}
              <div className="flex items-center gap-3 p-3 bg-white/50 dark:bg-gray-800/50 rounded-md">
                <div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white text-sm font-bold">
                  Q
                </div>
                <div className="flex-1">
                  <div className="text-sm font-medium">QQ</div>
                  <div className="text-xs text-muted-foreground">即时交流</div>
                </div>
                <div className="text-sm font-mono bg-blue-100 dark:bg-blue-900/30 px-2 py-1 rounded">
                  {contacts.qq}
                </div>
              </div>

              {/* 邮箱联系 */}
              <div className="flex items-center gap-3 p-3 bg-white/50 dark:bg-gray-800/50 rounded-md">
                <div className="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center text-white text-sm">
                  📧
                </div>
                <div className="flex-1">
                  <div className="text-sm font-medium">邮箱</div>
                  <div className="text-xs text-muted-foreground">正式咨询</div>
                </div>
                <a
                  href={contacts.emailUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-sm font-mono bg-green-100 dark:bg-green-900/30 px-2 py-1 rounded hover:underline text-green-700 dark:text-green-300"
                >
                  {contacts.email}
                </a>
              </div>

              {/* 个人微信号联系 */}
              <div className="flex items-start gap-3 p-3 bg-white/50 dark:bg-gray-800/50 rounded-md">
                <div className="w-8 h-8 bg-green-600 rounded-full flex items-center justify-center text-white text-sm font-bold">
                  微
                </div>
                <div className="flex-1">
                  <div className="text-sm font-medium">个人微信号</div>
                  <div className="text-xs text-muted-foreground">添加好友咨询</div>
                  <div className="text-sm font-mono bg-green-100 dark:bg-green-900/30 px-2 py-1 rounded mt-1 text-green-700 dark:text-green-300">
                    {contacts.wechatPersonal.wechatId}
                  </div>
                </div>
                <div className="flex flex-col items-center gap-1">
                  <img
                    src={contacts.wechatPersonal.qrCodeUrl}
                    alt="个人微信二维码"
                    className="w-16 h-16 border border-gray-200 dark:border-gray-700 rounded"
                    onError={(e) => {
                      const target = e.target as HTMLImageElement;
                      target.style.display = 'none';
                    }}
                  />
                  <span className="text-xs text-muted-foreground">扫码添加</span>
                </div>
              </div>

              {/* 微信公众号联系 */}
              <div className="flex items-start gap-3 p-3 bg-white/50 dark:bg-gray-800/50 rounded-md">
                <div className="w-8 h-8 bg-emerald-500 rounded-full flex items-center justify-center text-white text-sm font-bold">
                  微
                </div>
                <div className="flex-1">
                  <div className="text-sm font-medium">微信公众号</div>
                  <div className="text-xs text-muted-foreground">关注获取最新资讯</div>
                  <div className="text-sm font-mono bg-emerald-100 dark:bg-emerald-900/30 px-2 py-1 rounded mt-1 text-emerald-700 dark:text-emerald-300">
                    {contacts.wechatOfficialAccount.name}
                  </div>
                </div>
                <div className="flex flex-col items-center gap-1">
                  <img
                    src={contacts.wechatOfficialAccount.qrCodeUrl}
                    alt="微信公众号二维码"
                    className="w-16 h-16 border border-gray-200 dark:border-gray-700 rounded"
                    onError={(e) => {
                      const target = e.target as HTMLImageElement;
                      target.style.display = 'none';
                    }}
                  />
                  <span className="text-xs text-muted-foreground">扫码关注</span>
                </div>
              </div>
            </div>
          </div>

          {/* 网站特色 */}
          <div className="mt-6 p-4 bg-purple-50 dark:bg-purple-950/20 rounded-lg border border-purple-200 dark:border-purple-800">
            <h4 className="text-sm font-medium text-purple-900 dark:text-purple-100 mb-3 flex items-center gap-2">
              <span className="text-lg">✨</span>
              网站特色
            </h4>
            
            <div className="grid grid-cols-2 gap-3 text-xs">
              <div className="flex items-center gap-2">
                <span className="text-base">🎯</span>
                <span className="text-purple-700 dark:text-purple-300">聚合搜索</span>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-base">🎨</span>
                <span className="text-purple-700 dark:text-purple-300">简洁美观</span>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-base">📱</span>
                <span className="text-purple-700 dark:text-purple-300">响应式设计</span>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-base">🚀</span>
                <span className="text-purple-700 dark:text-purple-300">快速便捷</span>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-base">🌙</span>
                <span className="text-purple-700 dark:text-purple-300">暗色主题</span>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-base">🔒</span>
                <span className="text-purple-700 dark:text-purple-300">安全可靠</span>
              </div>
            </div>
          </div>

          {/* 版本信息 */}
          <div className="mt-4 text-center">
            <div className="inline-flex items-center gap-2 px-3 py-1 bg-gray-100 dark:bg-gray-800 rounded-full text-xs text-muted-foreground">
              <span>🏷️</span>
              <span>Version 2.0 | React + Next.js</span>
            </div>
          </div>

          {/* 感谢信息 */}
          <div className="mt-4 text-center p-3 bg-gradient-to-r from-pink-50 to-rose-50 dark:from-pink-950/20 dark:to-rose-950/20 rounded-lg border border-pink-200 dark:border-pink-800">
            <p className="text-sm text-pink-800 dark:text-pink-200">
              感谢您使用 Hello123 导航网站！
            </p>
            <p className="text-xs text-pink-600 dark:text-pink-300 mt-1">
              您的支持是我们不断改进的动力 ❤️
            </p>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
} 